<template>
	<!-- 这是一个打卡页面 -->
	<view class="w100 min100 sign pb-40">


		<view class="box animate__animated">
			<view class="box_left">
				<text class="aaa">当前定位:</text>
				<text class="pos">{{ address }}</text>
			</view>
			<view class="box_right" @click="openLocation()">获取位置</view>
		</view>




		<u-transition :show="true" mode="fade-left">
			<!-- <view style="padding:120rpx 0 40rpx; width: 100%;height: 340rpx;background: url(../..https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/sign-top.png) no-repeat center center;background-size: contain; border: ; background-color: #FFFFFF;"> -->
			<view style="margin:80rpx 85px 50rpx;" class="rili_box">
				<view class="gray-2 text-center">本月连续签到</view>
				<view class="text-center mt-30 ">
					<text style="font-size: 50rpx;margin-right: 20rpx;" class="yellow bold">{{sumCount}}</text>
					天
				</view>
			</view>
			<view class="bg-white mlr-20 radius-10 ptb-20">
				<model-calendar :sendYear="toYear" :sendMonth="toMonth" :dataSource="signData" :totalNum="sumCount"
					@clickChange="clickChange" @dateChange="getRecord"></model-calendar>
				<view class="plr-40">
					<u-button type="warning" @click="clickSign" class="w100">
						{{ !status ? '立即签到' : '今天设置任务' }}
					</u-button>
				</view>
			</view>

			<view class="count" @click="gohead()" v-if="signBackFlag">
				<view class="bold" style="color: red;">{{days}}：</view>
				<view class="mt-20 mb-6" style="font-size: 18px; font-family: STFangsong; color: #888888;">
					Title:{{signBack.title}}
				</view>

				<view style=" color: #888888;">
					{{signBack.content}}
				</view>

			</view>

			<view class="count" v-else>
			  	{{days}}没有任务安排
			</view>
			<view class="count  ">
				<view class="bold">连续签到有机会领取以下奖励：</view>



				<view>
					每次签到奖励积分
					<text class="yellow">2</text>
					分
				</view>

				<view class="mt-20 mb-6">
					本月连续
					<text class="yellow">7</text>
					天，奖励积分
					<text class="yellow">{{ set.signin_day_seven }}</text>
					分；
				</view>
				<view>
					本月连续
					<text class="yellow">15</text>
					天，奖励积分
					<text class="yellow">{{ set.signin_day_fifteen }}</text>
					分
				</view>
			</view>
		</u-transition>



		<u-popup :show="show" @close="close" @open="open" mode="top">
			<view style="margin:20rpx 40rpx ;">
				<text class="textss">{{signBack.title}}</text>
			</view>
			<view class="clock_item">
				<view class="start">
					开始：{{signBack.startTime}}
				</view>
				<view class="end" v-if="signBack.endTime == null">
					结束：结束后结算
				</view>

				<view class="end" v-else>
					结束:{{signBack.endTime}}
				</view>
			</view>

			<view class="clock_middle">
				{{signBack.content}}
			</view>
			<view class="u-popup-slot" :style="{
								width:  '750rpx' ,
								marginTop: '20rpx' ,
							}" v-if="signBack.isTrue!=1">
				<u-button type="success" color="#6c3dcc" text="完成任务" customStyle="width: 200rpx" @click="finishTask()">
				</u-button>
				<u-button type="success" text="删除日程" color="#8bcc79" customStyle="width: 200rpx" @click="show = !show">
				</u-button>
			</view>

			<view class="u-popup-slot" v-else>

				<u-button type="success" text="你已完成任务" color="#8bcc79" customStyle="width: 200rpx"
					@click="show = !show">
				</u-button>
			</view>
		</u-popup>



	</view>
</template>

<script>
	let _self = null;

	import modelCalendar from '@/components/Calendar/Calendar.vue';

	export default {
		data() {
			return {
				toYear: parseInt(new Date().getFullYear()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				today: parseInt(new Date().getDay()),
				sumCount: 0,
				signData: [], //[],
				status: false,
				set: {
					signin_day_fifteen: 20,
					signin_day_seven: 7
				},
				month: '',
				// 以下是获取地图的数据
				address: '我走过最远的路就是你心里的路',
				latitude: "", //当前经度
				longitude: "", //当前维度
				signInfo: {
					mode: "",
					latitude: "", //纬度
					longitude: "", //经度
					address: "",
				},
				animation: '',
				animationData: {},
				isStop: true,
				show: false,
				id: null,
				signBack: {

				},
				signBackFlag: false,
				days: null


			};
		},
		components: {
			modelCalendar
		},

		onBackPress(e) {
			console.log("监听返回按钮事件", e);
			uni.switchTab({
				url: "/pages/bottom-nav/index/index"
			})
			// 此处一定姚要return为true，否则页面不会返回到指定路径
			return true;
		},
		onLoad() {
			_self = this;
			this.init();

			let data = uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd')
			this.days = data
			this.getDetailDialy(data);

		},



		methods: {

			gohead() {
				this.show = !this.show
			},


			//点击某个日子
			clickChange(e,type) {
				this.days = e
				if(type==1)
				{
					
					this.getDetailDialy(e)
					
				}
			
				
			},
			finishTask() {
				console.log(this.signBack.id);


				uni.$u.http.get('/app/sign/rebackfinish/' + this.signBack.id).then(res => {

					if (res.code == 0) {
						uni.showToast({
							title: '恭喜你完成任务',
							icon: 'none'
						});
					}
					this.show = !this.show
					this.signBack.isTrue = 1
				})
			},
			noscaleAndScale() {
				this.animation.scale(1, 1).step()
				this.animationData = this.animation.export()
			},
			init() {

				uni.$u.http.post('/app/sign/dakaiDetail/newmontth', {
					month: this.toMonth,
					year: this.toYear
				}).then(res => {

					this.signData = res.data.signData
					this.sumCount = res.data.sumCount
					this.status = res.data.status
				})

			},
			getDetailDialy(data) {
				uni.$u.http.get('/app/sign/dakaiDetailanswer/' + data).then(
					res => {
						console.log(res);

						if (res.data != null) {
							this.signBack = res.data
							this.signBackFlag = !this.signBackFlag
						} else {
							this.signBack = {}
							this.signBackFlag = false
						}

					})
			},

			getRecord(year, month) {

				// this.month = data;
				// this.init();
				// this.signData = ['2022-2-8', '2022-2-9', '2022-2-10']

				this.toYear = year
				this.toMonth = month
				this.init()

			},


			close() {
				this.show = false
				// console.log('close');
			},
			clickSign() {

				if (!this.status) {
					uni.$u.http.get('/app/sign/').then(
						(res) => {
							if (res) {

								this.id = res.data
								uni.showModal({
									title: '签到成功',
									content: '是否安排今天任务？',
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: 'todo/todo?id=' + this.id
											})
										} else if (res.cancel) {
											this.init()
										}

									}
								});
							} else {


							}
						}
					)
				} else {
					if (this.signBackFlag == true && this.signBack.date == uni.$u.timeFormat(this.timestamp,
							'yyyy-mm-dd')) {
						uni.showToast({
							title: '你已经有任务了',
							icon: 'none'
						});
					} else {
						uni.navigateTo({
							url: 'todo/todo?id=' + this.id
						})
					}

				}
			},
			//当模板的时候可以直接引入，然后触发子组件事件到父界面去控制数据



			getLocation() {
				var that = this;
				// 显示提示框
				uni.showLoading({
						title: "获取定位中...",
						mask: true,
					}),
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						// type: 'wgs84', //返回可以用于uni.openLocation的经纬度
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							uni.hideLoading(); //取消提示框
							that.latitude = res.latitude;
							that.longitude = res.longitude;

							that.signInfo.longitude = res.longitude;
							that.signInfo.mode = "正常记录"
							that.signInfo.latitude = res.latitude;
							that.getAdd()
						},
						fail(err) {
							uni.hideLoading(); //取消提示框
							that.address = "请检查位置信息!"
							uni.showToast({
								title: "请检查位置信息状态！",
								icon: "none",
								mask: true,
								duration: 3000
							})
						}
					})
			},
			getAdd() {
				// 获取当前位置的"腾讯位置服务"
				var url =
					// `https://apis.map.qq.com/ws/geocoder/v1/?location=${_self.latitude},${_self.longitude}&key=3DABZ-JP5EF-I6EJE-JALWN-IOBP6-A5FDF`;
					`https://apis.map.qq.com/ws/geocoder/v1/?location=${_self.latitude},${_self.longitude}&key=FA3BZ-WUREQ-X5N5D-GTIKO-NRLEH-6HBLF`;
				uni.request({
					url,
					success(res) {
						console.log(res.data);
						var data = res.data;
						if (data.status != 0) {
							uni.showToast({
								title: data.message,
								icon: "none"
							})
							return;
						}
						let address = res.data.result.address + res.data.result.formatted_addresses.recommend
						_self.address = address;
						_self.signInfo.address = address;
					}
				})
			},
			// 选择地址
			openLocation() {
				// console.log("signInfo内容是"+_self.signInfo.address);
				_self.getLocation();
				// _self.getTime();
				return;
				uni.chooseLocation({
					success: function(res) {
						_self.address = res.address;
						_self.signInfo.address = res.address;
					}
				});
			}









		}
	};
</script>

<style lang="scss" scoped>
	.sign {
		background-image: linear-gradient(109.9deg, rgba(251, 189, 100, 1) 1.8%, rgba(255, 207, 139, 1) 95.4%);
		// background: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/bg/punchIn.jpg) no-repeat top left;
		padding-bottom: 2px;
		background-size: cover;
	}

	.textss {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 100%;
		line-height: 1em;
		color: #4e4e4e;
		font-size: 20px;

	}

	.count .daynumber {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.count .daynumber .day {
		margin-top: 50rpx;
	}

	.count {
		margin: 20rpx;
		padding: 30rpx;
		display: flex;
		/* text-align: center; */
		border-radius: 10px;
		flex-direction: column;
		/* justify-content: center; */
		background-color: #fff;
		/* align-items: center; */
	}

	.count .number {
		color: #fff;
		font-size: 60rpx;
		background-color: #94db98;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx;
	}

	.monthSum {
		color: red;
		font-size: 40rpx;
	}

	.count text {
		margin: 10rpx;
	}

	.box {
		height: 35px;
		background-color: #ffe194;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.box_left {
		width: 75%;
		height: 100%;
		// background-color: #007AFF;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.aaa {
		width: 50%;
		font-style: '华文仿宋';
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 35px;
		// background-color: #00B26A; 
	}

	.pos {
		line-height: 35px;
		color: #888888;
	}

	.box_right {
		padding: 0 8px;
		color: #ffffff;
		font-size: 12px;
		margin: 2px 8px 2px 0;
		line-height: 28px;
		background-color: #ff884b;
		border-radius: 8px;
	}

	.bg-white {
		background-color: white;
	}

	.mlr-20 {
		padding: 0 5px;
		margin: 0 15px;
		padding-bottom: 10px;
	}

	.radius-10 {
		border-radius: 10px;
	}

	.ptb-20 {
		padding-top: 10px;
	}

	.plr-40 {
		padding: 0 30px;
	}

	.w100 {
		border-radius: 15px;
		font-size: 18px;
	}

	.bold {
		font-weight: bold;
	}

	.yellow {
		color: #ff884b;
	}

	.text-center {
		font-size: 18px;
	}

	.rili_box {
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		align-items: center;
		padding-top: 40px;
		box-sizing: border-box;
		width: 200px;
		height: 150px;
		// background-color: #fff;
		background: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icons/rili.png) no-repeat top left;
		background-size: 100% 100%;
	}

	.u-popup-slot {
		width: 200px;
		height: 150px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.clock_item {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: space-between;
		text-align: center;
		margin: 10px 0;
		color: #80ccb0;

		.start {
			flex: 1;
		}

		.end {
			flex: 1;
		}
	}

	.clock_middle {
		text-indent: 2em;
		padding: 60upx;
	}
</style>
